<div class="log-header" ng-if="!chromeless">
  <div ng-transclude class="log-status"><!-- expect start time, end time, status details --></div>
  <div class="log-actions">
    <span ng-if="kibanaAuthUrl">
      <form
        action="{{kibanaAuthUrl}}"
        method="POST">
        <input type="hidden" name="redirect" value="{{kibanaArchiveUrl}}">
        <input type="hidden" name="access_token" value="{{access_token}}">
        <button class="btn btn-link">View archive</button>
      </form>
      <span ng-if="state !== 'empty'" class="action-divider">|</span>
    </span>
    <a ng-if="state !== 'empty'"
       href=""
       ng-click="goChromeless(options, fullLogUrl)"
       role="button">
       Expand log
       <i class="fa fa-external-link"></i>
    </a>
  </div>
</div>

<div ng-if="largeLog" class="alert alert-info log-size-warning">
  <span class="pficon pficon-info" aria-hidden="true"></span>
  Only the previous {{options.tailLines || 5000}} log lines and new log
  messages will be displayed because of the large log size.
</div>


<!-- show this spinner until the log viewer starts. important for pending state, etc -->
<div class="text-center gutter-top" ng-if="(!state)">
  <ellipsis-loader></ellipsis-loader>
</div>

<div class="empty-state-message text-center" ng-if="state=='empty'" ng-class="{'log-fixed-height': fixedHeight}">
  <h2>Logs are not available.</h2>

  <p>
    {{emptyStateMessage}}
  </p>

  <div ng-if="kibanaAuthUrl">
    <form
      action="{{kibanaAuthUrl}}"
      method="POST">
      <input type="hidden" name="redirect" value="{{archiveLocation}}">
      <input type="hidden" name="access_token" value="{{access_token}}">
      <button class="btn btn-primary btn-lg">
        View Archive
      </button>
    </form>
  </div>
</div>


<!-- must be ng-show rather than ng-if, else DOM is not rendered in time to cache nodes -->
<div ng-show="state=='logs'">
  <div class="log-view" id="{{logViewerID}}" ng-class="{'log-fixed-height': fixedHeight}">
    <div
      ng-show="showScrollLinks"
      id="{{logViewerID}}-affixedFollow"
      class="log-scroll log-scroll-top">
      <a ng-if="loading" href="" ng-click="toggleAutoScroll()">
        <span ng-if="!autoScrollActive">Follow</span>
        <span ng-if="autoScrollActive">Stop following</span>
      </a>
      <a ng-if="!loading" href="" ng-click="onScrollBottom()">
        Go to end
      </a>
    </div>
    <div class="log-view-output" id="{{logViewerID}}-fixed-scrollable" >
      <table>
        <tbody id="{{logViewerID}}-logContent"></tbody>
      </table>
      <div ng-if="(!loading) && (!limitReached) && (!errorWhileRunning) && state=='logs'" class="log-end-msg">
        End of log
      </div>
    </div>
    <!-- show this spinner indicating logs are still streaming -->
    <ellipsis-loader ng-show="loading"></ellipsis-loader>
    <div
      ng-show="showScrollLinks"
      class="log-scroll log-scroll-bottom">
      <a href="" ng-click="onScrollTop()">Go to top</a>
    </div>
  </div>
</div>

<!-- Show a different messsage if the log might have stopped because we reached the byte limit -->
<div ng-if="limitReached" class="text-muted">
  The maximum web console log size has been reached. Use the command-line interface or
  <a href="" ng-click="restartLogs()">reload</a> the log to see new messages.
</div>


<div ng-if="errorWhileRunning" class="text-muted">
  An error occurred loading the log.
  <a href="" ng-click="restartLogs()">Reload</a>
</div>
